<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('级别')" prop="grade">
            <dict-select
              v-model="form.grade"
              :disabled="disableSel"
              dictionary="indicator_grade"
              :placeholder="$t('级别')"
              @change="changeRank"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.grade === '2'" :span="12">
          <el-form-item :label="$t('所属上级')" prop="parentId">
            <el-select v-model="form.parentId" :placeholder="$t('所属上级')" :disabled="disableSel">
              <el-option
                v-for="dict in parentOptions"
                :key="dict.id"
                :label="dict.indicators"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('指标')" prop="indicators">
            <el-input v-model="form.indicators" :placeholder="$t('指标')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('指标Code')" prop="indicatorsCode">
            <el-input v-model="form.indicatorsCode" :placeholder="$t('指标Code')" :disabled="form.id && form.indicatorsCode" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <!--
        <el-col v-if="form.grade === '2'" :span="12">
          <el-form-item :label="$t('指标属性')" prop="properties">
            <dict-select
              v-model="form.properties"
              dictionary="indicator_properties"
              :placeholder="$t('指标属性')"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="form.grade === '2'" :span="12">
          <el-form-item :label="$t('单位')" prop="unit">
            <el-input v-model="form.unit" :placeholder="$t('单位')" show-word-limit maxlength="5" />
          </el-form-item>
        </el-col>
        -->
        <el-col v-if="form.grade === '2'" :span="12">
          <el-form-item :label="$t('计算方式')" prop="calculationRange">
            <span slot="label">
              {{ $t('计算方式') }}
              <el-tooltip placement="top">
                <div slot="content">
                  {{ $t('以月度为例: ') }}
                  <br>
                  <span style="margin-left: 15px">{{ $t('最新值: 默认情况, 取最后一个月份录入的数据') }}</span>
                  <br>
                  <span style="margin-left: 15px">{{ $t('累计值: 当前月及当前月之前所有值的累计') }}</span>
                </div>
                <i class="el-icon-question" />
              </el-tooltip>
            </span>
            <el-radio-group v-model="form.calculationRange" :placeholder="$t('计算范围')">
              <el-radio label="latest">{{ $t('最新值') }}</el-radio>
              <el-radio label="accumulated">{{ $t('累计值') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('排序')" prop="sort">
            <el-input-number v-model="form.sort" />
          </el-form-item>
        </el-col>
        <el-col v-show="!(form.grade === '1')" :span="12">
          <el-form-item v-if="form.grade === '1'" :label="$t('是否可以添加子项')" prop="areSubItem">
            <el-select v-model="form.areSubItem" :disabled="form.grade === '1'" :placeholder="$t('是否可以添加子项')">
              <el-option
                v-for="dict in yesOrNoOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--
        <el-col v-if="form.grade === '2'" :span="12">
          <el-form-item :label="$t('是否可以修改')" prop="areModify">
            <el-select v-model="form.areModify" :placeholder="$t('是否可以修改')">
              <el-option
                v-for="dict in yesOrNoOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        -->
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('备注')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="deal:indicator" />
    </div>
  </div>
</template>

<script>
import {
  saveDealIndicatorPredict,
  getDealIndicatorPredict,
  listDealIndicatorPredict,
  getDealIndicatorPredictByCode,
  syncToDeal
} from '@/api/deal/indicator/dealIndicatorPredict'
    export default {
        data() {
            const checkIndicatorCode = (rule, value, callback) => {
              if (value === undefined || value === '' || value === null) {
                callback(new Error(this.$t('必填信息')))
              } else {
                if (this.form.id) {
                  callback()
                } else {
                  getDealIndicatorPredictByCode(this.form.indicatorsCode, this.$route.query.companyId, this.form.typeId).then(response => {
                    console.log(response)
                    if (response.data > 0) {
                      callback(new Error(this.$t('当前code已存在!')))
                    } else {
                      callback()
                    }
                  })
                }
              }
            }
            return {
                // 是否可以选择
                disableSel: false,
                // 表单参数
                form: {},
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                grade: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                indicators: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                  parentId: [
                    { required: true, message: this.$t('必填信息'),	trigger: 'blur' }
                    ],
                  properties: [
                    { required: true, message: this.$t('必填信息'),	trigger: 'blur' }
                  ],
                  indicatorsCode: [
                    { required: true, validator: checkIndicatorCode, trigger: 'blur' }
                  ]
                },
              // 所属上级
              parentOptions: [],
              // 所属上级查询参数
              queryParams: {
                businessId: this.$route.query.companyId,
                parentId: '0'
              },
              yesOrNoOptions: []
            }
        },
        created() {
            this.getDicts('indicator_grade').then(response => {
                this.gradeOptions = response.data
            })
          this.getDicts('sys_yes_no').then(response => {
            this.yesOrNoOptions = response.data
          })
        },
        methods: {
            // 初始化数据
          init(id, typeId) {
            this.disableSel = false
            if (id !== null && id !== undefined) {
              getDealIndicatorPredict(id).then(response => {
                this.form = response.data
                this.form.typeId = typeId
                this.disableSel = false
                this.changeRank(this.form.grade, this.form.parentId)
              })
            } else {
              this.reset()
              this.form.typeId = typeId
            }
          },
          // 新增下级
          initJunior(data, typeId) {
            this.reset()
            if (data.grade === '1') {
              this.form.grade = '2'
            }
            this.disableSel = true
            this.changeRank(this.form.grade, data.id)
            this.form.typeId = typeId
          },
          // 获取所属上级
          changeRank(val, parentId) {
            this.form.parentId = parentId
            listDealIndicatorPredict({
              businessId: this.$route.query.companyId,
              parentId: '0',
              typeId: this.form.typeId
            }).then(response => {
              this.parentOptions = response.rows
            })
            this.$nextTick(() => {
              if (parentId) {
                this.form.parentId = parentId
              }
            })
            this.form.areSubItem = 'N'
            if (val === '1') {
              this.form.areSubItem = 'Y'
            }
          },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    typeId: undefined,
                    parentId: undefined,
                    grade: undefined,
                    indicators: undefined,
                    indicatorsCode: undefined,
                    sort: undefined,
                    calculationRange: 'latest',
                    remark: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined,
                    delFlag: undefined,
                    areSubItem: 'N',
                    areModify: 'N',
                    properties: 'Z',
                    businessId: this.$route.query.companyId
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
                this.$parent.$parent.$parent.$parent.formOpen = false
                this.$parent.$parent.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                if (this.$parent.$parent.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.$parent.$parent.getList()
                }
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveDealIndicatorPredict(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                if (this.isEmpty(this.$route.query.id)) {
                                  // 弹窗提示是否沉淀到当前聚焦行业的项目下
                                  this.$confirm(this.$t('是否同步到与当前行业类型相同的项目中?'), this.$t('提示'), {
                                    confirmButtonText: this.$t('同步'),
                                    cancelButtonText: this.$t('取消'),
                                    type: 'warning'
                                  }).then(() => {
                                    syncToDeal(response.data).then(response2 => {
                                      console.log(response2)
                                      this.closeForm()
                                    }).catch(() => {
                                      this.msgWarning(this.$t('请检查是否同步成功!'))
                                      this.loading = false
                                    })
                                  }).catch(() => {
                                    this.closeForm()
                                  })
                                } else {
                                  this.closeForm()
                                }
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                })
           }

        }

    }
</script>
